<template>
  <div>
    <h2>图表3</h2>
    <div class="chart" ref="threeChart">容纳后期的图表</div>
  </div>
</template>

<script>
import { inject, onMounted, reactive, ref } from "vue";
export default {
  setup() {
    // 设置echarts 设置axios 创建接受请求的变量
    let $echarts = inject("echarts");
    let $http = inject("axios");
    let data = reactive({});
    let threeChart = ref(null);
    // 获取数据
    async function getState() {
      data = await $http({ url: "three/data" });
      console.log("饼状图", data.data.chartData.chartData);
    }
    onMounted(() => {
      getState().then(() => {
        // 初始化echarts
        let myChart = $echarts.init(threeChart.value);
        myChart.setOption({
          legend: {
            // 设置图例
            top: "bottom", //放到最下面
          },
          series: [
            {
              type: "pie", //饼图
              radius: [10, 100], //饼图的半径数组的第一项
              center: ["50%", "45%"], //饼图的中心(圆心)坐标 数组的第一项是横坐标 第二项始纵坐标
              roseType: "area", //设置成玫瑰图
              itemStyle: {
                borderRadius: 10, //用于指定饼图扇形区块的内外圆的半径
              },
              data: data.data.chartData.chartData, //数据
            },
          ],
          // 设置饼状图的颜色
          color: [
            "#c12e34",
            "#e6b600",
            "#0098d9",
            "#2b821d",
            "#005eaa",
            "#339ca8",
          ],
          // 提示框
          tooltip: {
            show: true, //默认是true 显示
            borderRadius: 10, //提示边框颜色 单位：px 默认是4
          },
        });
      });
    });
    return {
      getState,
      data,
      threeChart,
    };
  },
};
</script>

<style scoped>
.chart {
  height: 4.5rem;
}
h2 {
  height: 0.6rem;
  color: #fff;
  line-height: 0.6rem;
  font-size: 0.25rem;
  text-align: center;
}
</style>